@charset "utf-8";
@mixin background-url($url:url(img/banner1.png)){
    background: $url center no-repeat;
    background-size:100% 100%;
}
@mixin font-color ($font-size:0.16rem,$line-height:0.21rem,$color:#616161){
    font: normal #{$font-size}/#{$line-height} "微软雅黑";
    color: $color;
}

/*通用的部分样式*/
.inlineList{
        width: 100%;
        text-align: center;
        font-size: 0;
        li{
            display: inline-block;
            _zoom:1;
            *display:inline;  
            vertical-align: middle;
             
        }
        .firstItem{
            margin-left: 0 !important;
        }
    }
    
/*内容部分*/
.banner{
    width: 100%;
    height: 4.5rem;
    background: url(img/banner_01.jpg) center top no-repeat,url(img/banner_02.jpg) center 2.38rem no-repeat;
    background-size: 100% 2.4rem,100% 2.10rem;
}
.topList{
    width: 100%;
    margin: 0 auto;
    padding: .26rem 0 0 0;
    text-align: center;
    font-size: 0;        
    li{
        display: inline-block;        
        padding: .20rem 0 .15rem .30rem;
        margin:0 0 .28rem 0;
        border: 1px solid #dfdfdf;
        .boxLeft{
            display: inline-block;
            vertical-align: middle;
            width: .67rem;
            height: .62rem;
            background: url(img/topIcon.png) left center no-repeat;
            background-size: auto 0.62rem;
            
            
        }
        .item-2{
            background-position-x: -1.08rem;
        }
        .item-3{
            background-position-x: -2.04rem;
        }
        .item-4{
            background-position-x: -3.08rem;
        }        
        .boxRight{
            display: inline-block;
            vertical-align: middle;
            width: 2.00rem;            
            padding-left: .2rem;
            text-align: left;           
            h3{
                @include font-color(.26rem,.32rem,#080808);               
            }
            p{
                @include font-color(.22rem,.32rem,#757575);
            }
        }
    } 
    li:nth-child(even){
        margin-left: 0.28rem;
    }   
}
.titleGroup{
    padding: .35rem 0 .27rem 0;
    h2{
        @include font-color(.42rem,.50rem,#080808);
        text-align: center;
    }
}
.businessWrap{
    width: 100%;
    background-color: #e6e6e6;
    padding-bottom: .5rem;
}
.businessBox{    
    text-align: center;
    font-size: 0;
    .general-contract,.general-contract1{
        display: inline-block;  
        vertical-align: middle;      
        width: 3.45rem;
        font-size: 0;
        
    }
    .general-contract{ 
        margin-right: .20rem;       
        .top{
            height: .65rem;         
            background-color: #41403d;
            p{
                position: relative;
                text-indent: 1.2rem;
                @include font-color(.32rem,.65rem,#d0a531);
                text-align: left;
            }
            p:before{               
                position: absolute;
                left: .52rem;
                top: .1rem;
                width: .50rem;
                height: .46rem;
                content: '';
                background: url(img/business_bg.png) left center no-repeat;
                background-size: auto .46rem; 
            }
        }
        .bottom{             
            height: 3.51rem - .28rem;
            padding-top: .28rem;
            background-color: #ffffff;
            p{               
                @include font-color(.24rem,.42rem,#2b2b2b);
                text-align: center;
            }
        }
    }
    .general-contract1{
        height: 4.16rem;
    }
    .labour-services{
        margin-bottom: .2rem;
        .top{
            p:before{
                background-position-x: -.72rem;
            }
        }
        .bottom{
            height: .87rem - .28rem;
        }
    }
    .other-services{
        margin-right: 0;
        .top{           
            p:before{                               
               background-position-x: -1.46rem;
            }
        }
        .bottom{           
           height: 1.79rem - .28rem;
        }
    }
    .Professional-contract{        
        width: 7.1rem;
        margin-right: 0;
        padding: 0.2rem 0 0.5rem 0;
        .top{
            p{
                text-indent: 2.86rem;
            }
            p:before{
                left: 2.16rem;
                background-position-x: -2.20rem;
            }           
        }
        .bottom{           
            height: 4.14rem - .28rem;
            div{
                float: left;
                p{
                    text-align: left;
                }
            }
            .first-col{               
                width: 1.38rem;
                padding-left: 0.23rem;
            }
            .second-col{                
                width: 1.70rem;
                padding-left: 0.64rem;
            }
            .third-col{    
                padding-left: 0.64rem;           
                width: 2.50rem;
            }
            .last-col{
                padding-left: 0.23rem;
            }
           
        } 
        
    }
}
.tellGroup{
    $width:5.58rem;
    $border-radius:0.4rem;
    $bg-color:#ff6b00;    
        width: $width;
        margin: 0 auto;
        font-size: 0;
        border-radius:$border-radius;
        background-color:$bg-color;
        text-align:justify;
        box-shadow:1px 1px 2px #ff7500,
                   -1px -1px 2px #ff7500;
                    
       
        &:after{
             content:"";  
              display:inline-block;  
              width:100%;  
        }
        span{
            display: inline-block;
            vertical-align: middle;
                       
        }
        .fengxian1{  
            $width:2.90rem;
            width: $width;
            margin-left:3px;        
            @include font-color(.22rem,.45rem,#ff7800);
            background: url(img/xiaoxi.png) .8rem center no-repeat;
            background-size: .21rem .20rem;
            background-color: #ffffff;
            border-radius:0.2rem;
            text-indent: 1.16rem;          
        }
        .fengxian2{
            padding-right: 0.29rem;  
            @include font-color(.28rem,.53rem,#ffffff);  
            a{
                color: #FFFFFF;
            }
                                                  
        }
    }
.liuchengWrap{
    padding-bottom: 0.4rem;
    ul{
        padding-bottom: 0.5rem;
    }
    .right-direction,.bottom-direction,.left-direction,{
        position: relative;
        vertical-align: top;       
        p{
            position: relative;            
            display: table-cell;
            padding-top: 0.9rem;
            width: 1%;
            height: 0.6rem;
            vertical-align: middle;
            text-align: center;          
            @include font-color(0.22rem,0.24rem,#000000); 
            &:before{
                position: absolute;
                top: 0.18rem;
                left: 28%;
                content: '';
                width: 0.78rem;
                height: 0.52rem;                
                background: url(img/liuchengIcon.png) 0.08rem top no-repeat;
                background-size: auto 2.32rem; 
                
            } 
        }               
    }
    .right-direction{
        width: 2.15rem;
        height: 1.61rem;
        background: url(img/right-direction.png) center no-repeat;
        background-size: cover;
        margin-right: 0.36rem;
        p{
            left: -5%;
            &:before{
                left: 34%;
            }
        }
    }    
    .line1-2{
        p:before{
            background-position-x: -0.82rem;
        }
    }
    .line1-3{
        
        p:before{
            background-position-x: -1.76rem;
        }
    }
    .bottom-direction{
        margin-right: 0;
        margin-bottom: 0.18rem;
        width: 1.97rem;
        height: 1.79rem;
        background: url(img/bottom-direction.png) center no-repeat;
        background-size: cover;
        p{
            left: 0;
        }
    
    }
    .left-direction{
        width: 2.15rem;
        height: 1.61rem;
        background: url(img/left-direction.png) center no-repeat;
        background-size: cover;
        margin:0 0 0 0.40rem;
        p{
            left: 5%;
            &:before{
                left: 31%;               
            }
        }
    }
    .line2-1{
        p:before{
            background-position: -3.58rem -0.88rem;                   
        }                
    }
    .line2-2{
       
        p:before{
            background-position-x: -3.58rem;
                //background-position: -0.82rem -0.88rem;        
        } 
    }
    .line2-3{
        p:before{
            background-position-x: -2.78rem;
                    
        } 
    }
    .line3-1{
        p:before{
               background-position: -2.78rem -0.88rem;        
        } 
    }
    .line3-2{
        p:before{
                background-position: -1.76rem -0.88rem;    
        } 
    }
    .line3-3{
        p:before{
            background-position: -0.82rem -0.88rem;
                //background-position: -1.66rem -1.82rem;    
        } 
    }
    .line4-1{
        p:before{
               background-position: -0.82rem -1.82rem;        
        } 
    }
    .line4-2{
        p:before{
               background-position: 0.08rem -1.82rem;        
        } 
    }
    .line4-3{
        p:before{
               background-position: 0.08rem -0.88rem;        
        } 
    }
    .line5-1{
        p:before{
               background-position: -1.76rem -1.76rem;         
        } 
    }
    .line5-2{
        p:before{
               background-position: -2.78rem -1.82rem;        
        } 
    }
    .direction{        
         vertical-align: top; 
         width: 1.97rem;
        height: 1.61rem;
        background: url(img/direction.png) center no-repeat;
        background-size: cover;
        p{
            padding: 0.36rem 0 0.1rem 0;
            @include font-color(0.32rem,0.36rem,#614024); 
        }
        .btn1{
            display: inline-block;
            width: 1.36rem;
            border-radius: 0.08rem;
            @include font-color(0.22rem,0.36rem,#ffffff); 
            background-color: #ff7800;          
        }
    }
    
}   
.ziliaoWrap{
    width: 100%;
    height: 9.36rem;
    background: url(img/ziliao_bg01.jpg) center top no-repeat,
                url(img/ziliao_bg02.jpg) center 2.98rem no-repeat,
                url(img/ziliao_bg02.jpg) center 5.94rem no-repeat;
    background-size: 100% 3rem,100% 3rem,100% 3.36rem;
    .titleGroup{
        padding-top: 0.25rem;
        h2{
            color: #d0a531;
        }
        p{
            text-align: center;
            @include font-color(0.22rem,0.42rem,#ffffff); 
        }
    }
    .ziliaoList{       
        li{
            width: 3.50rem;
            height: 2.35rem;
            background-color: rgba(47, 46, 43, 0.5);
            margin: 0 0 0.21rem 0;
            span{
                display: inline-block;
                width: 0.40rem;
                height: 0.40rem;
                margin-top: 0.16rem;
                text-align: center;
                @include font-color(0.24rem,0.40rem,#5f3e21);
                background-color: #d0a531;
                border-radius: 50%;
            }
            .textBottom{
                display: table-cell;
                width: 1%;
                height: 1.30rem;
                padding-top: 0.04rem;
                text-align: center;
                vertical-align: middle;
                @include font-color(0.22rem,0.3rem,#ffffff);
               
            }
            .details{
                @include font-color(0.22rem,0.3rem,#d0a531);
                text-align: center;
            }
        }
        li:nth-child(even){
            margin-left: 0.14rem;
        }
        .firstItem{
            margin-left: 0;
        }              
    }
} 
.advantageWrap{
    padding-bottom: 0.33rem;
    .inlineList{
        padding-bottom: 0.26rem;
        li{
            margin-bottom: 0.28rem;
            height: 2.36rem;
            border-radius: 0 0 10px 10px;
            box-shadow:  1px 1px 10px #E5E5E5;
            h3{
                $height:0.6rem;
                $padding-top:0.13rem;            
                width: 3.5rem;
                height: $height - $padding-top;
                padding-top: $padding-top;
                @include font-color(0.32rem,0.36rem,#d0a531); 
                background: #322c26 url(img/ad_bg.png) 0.26rem -1px no-repeat;
                background-size: 0.38rem 0.56rem;
                border-radius: 10px 10px 0 0;
            }
            p{
                margin: 0 auto;
                width: 2.6rem;
                padding-top: 0.30rem;
                @include font-color(0.21rem,0.36rem,#020202); 
                text-align: left;
            }
        }
        li:nth-child(even){
            margin-left: 0.14rem;
        }
        
    }
}
.hangyeWrap{
    width: 100%;
    padding-bottom: 40px;
    background-color:#f4f3f3;
    .hangyeList{
        margin:0 auto;
        padding-top: 0.14rem;
        width: 7.12rem;              
        background-color: #ffffff;
        box-shadow: 1px 1px 10px #E6E6E6,
                    1px 1px 10px #E6E6E6;
        .titlebox{
            position: relative;
            width: 7.12rem;
            height: 0.63rem;
            font-size: 0;
            background: url(img/pk_bg.png) center no-repeat;
            background-size: cover;
            span{
                display: inline-block;
                vertical-align: middle;
                padding-top: 0.1rem;
            }
            .shenma{  
                margin-left: 0.38rem;                              
                @include font-color(0.32rem,0.5rem,#d0a531); 
            }
            .other{   
                float: right;
                margin-right: 0.38rem;                            
                @include font-color(0.32rem,0.5rem,#d0a531); 
            }
            
        }
        ul{
          width: 7.12rem;
          background-color: #FFFFFF;
          padding: 0.3rem 0 0.44rem 0;        
      }
      .item-other{         
          font-size: 0;
          border-bottom: 1px #E9E9E9 solid;
          
          i{
              color: #ddb035;
              font-style: normal;
              font-weight: bold;
          }
          span:nth-child(1){
              display: inline-block;
              width: 39.72%;
              @include font-color(0.22rem,0.46rem,#000000);
              text-align: right;
              padding-right: 0.29rem;
          }
           span:nth-child(2){
               display: inline-block;
               width: 0.96rem;
               text-align: center;
                @include font-color(0.18rem,0.3rem,#ffffff);
                border-radius: 10px;
                background-color: #d0a531;
          }
          span:nth-child(3){
              display: inline-block; 
              @include font-color(0.22rem,0.46rem,#000000);             
              text-align: left;
              padding-left: 0.29rem;
              color: #a3a3a3;
          }
      }     
      .last-item{
          border-bottom: none;
          
      }
    }
    
}
.anliWrap{
    padding-bottom: 0.4rem;
    .anliList{
        padding-bottom: 0.3rem;
        li{
            width: 2.26rem;
            height: 1.86rem;
            margin: 0 0 0.18rem 0.16rem;
        }
    }
    
}
//表单样式
.formWrap00{
    font-size: 0;
    text-align: center;
    padding-bottom: 0.45rem;
    h2{
        padding: 0.36rem  0 0.1rem 0;
        @include font-color(0.42rem,0.7rem,#202020);
        text-align: center;
        
    }
    .areaText{
        font-size:0 ;
        padding-bottom: 0.18rem;
        border-bottom:1px solid #999999;
        span{
            display: inline-block;
            padding-left: 0.12rem;
            @include font-color(0.22rem,0.40rem,#3e3f44);
            
        }
        .iconText{
            color: #000000;
            padding-left: 0;
            margin-left: 0.23rem;
            @include font-color(0.30rem,0.40rem,#3e3f44);
            font-weight: bold;
            .phone_icon{
                display: inline-block;
                vertical-align: middle;
                margin-right: 0.1rem;
                width: 0.29rem;
                height: 0.30rem;
                background: url(img/form_icon_bg.png) left top no-repeat;
                background-size: 0.39rem auto;
                
            }
            /*处理ios的数字识别成电话号码问题*/
            a{
                    color: #3e3f44;
                }
        }       
    }
    .left{
        display: inline-block;
        width: 2.00rem;
        height: 0.88rem;
        padding: 0.28rem 0 0 0.4rem;
        text-align: left;
        h3{
            @include font-color(0.40rem,0.48rem,#060505);
            .choice_icon{
                display: inline-block;
                vertical-align: middle;
                margin-right: 0.06rem;
                width: 0.41rem;
                height: 0.38rem;
                background: url(img/form_icon_bg.png) left -0.63rem no-repeat;
                background-size: 0.39rem auto;
            }
        }
        p{
            @include font-color(0.21rem,0.36rem,#202020);
        }
    }
    .right{
        display: inline-block;
        font-size: 0;
        padding: 0.06rem 0;
        width: 4.6rem;
        .inputGroup{
            display: inline-block;
            vertical-align: middle;
            width: 1.70rem;
            
            input[type="radio"]{
                display:none;
            }    
            label{
                display: inline-block;
                position: relative;
                padding-left: 0.45rem;
                @include font-color(0.30rem,0.64rem,#202020);                  
                &:before{
                    position: absolute;
                    left: 0;
                    top: 28%;
                    width: 0.30rem;
                    height: 0.30rem;
                    content: '';
                    background: #202020;
                    border-radius: 0.06rem;
                }                                
            } 
            input[type="radio"]:checked+label:after{
                    position: absolute;
                    left: 0;
                    top: 28%;
                    width: 0.30rem;
                    height: 0.30rem;
                    content: '';
                    background: #202020 url(img/gou.png) center center no-repeat;
                    background-size: cover;
                    border-radius: 0.06rem;
                    
            }
        }
        .inputGroup:nth-child(even){
            margin-left: 0.93rem;
        }                                                                                          
    }
    input[type="text"]{
        width: 7.08rem;
        border: 1px solid #999999;
        margin-bottom: 0.35rem;
        @include font-color(0.22rem,0.78rem,#999999);
        text-indent: 0.6rem;
        background: url(img/form_icon_bg.png) 0.2rem -1.04rem no-repeat;
        background-size: 0.39rem auto;
        border-radius: 0.08rem;
        outline: 0;
        &:focus{
            border-color:#20a0ff;
        }
        
    }
    .btn{
        width: 7.10rem;
        @include font-color(0.32rem,0.64rem,#ffffff);
        background-color: #000000;
        border-radius: 0.08rem;
        -webkit-appearance : none;/*解决iphone safari上的圆角问题*/

    }
    .kong{
        @include font-color(0.28rem,0.64rem,red);
    }
    
}
